<template>
  <div>
    <div class="header_top">
      <div class="fanhui" @click="goBack()">
        <img src="../../assets/返回.png" alt="">
        <span class="sides" >返回</span>
      </div>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索康护项目"
        left-icon=""
        show-action
        autofocus
      >
        <template #left-icon>
          <div @click="onSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
          <div style="" @click="onSearch" class="sousuo">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="content">
      <div class="list" v-for="(item, index) in xiangMu" :key="index">
        <div class="title">
          <p>{{item.name}}</p>
        </div>
        <ul v-for="(menu, menuIndex) in item.itemList" :key="menuIndex" @click="xiangclick(menu.ITEM_ID, item.type)">
          <li class="li_top">
            <img src="../../assets/护理@2x.png" alt="">
          </li>
          <li class="li_content">
            <p class="name">{{menu.ITEM_NAME}}</p>
            <p class="time">
              <img src="../../assets/预约时间@2x.png" alt="">
              <span>{{menu.TIME}}分钟</span>
            </p>
          </li>
          <li class="li_bottom">
            <span class="price">￥{{menu.PRICE_ONE}}/次</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import videoHttp from '../../http/video.http'
export default {
  name: 'Search',
  data () {
    return {
      searchValue: '',
      xiangMu: []
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    // 输入框自动获取焦点
    console.log($('.van-search input').focus())
    $('.content').css('height', $(window).height() - $('.content').offset().top + 'px')
  },
  methods: {
    // 搜索
    onSearch () {
      this.$http.getItemsList({name: this.searchValue})
        .then(res => {
          console.log(res)
          this.xiangMu = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    xiangclick (itemid, type) {
      if (type === 0) {
        window.location.href = videoHttp.Http + 'kfhl/jjkf/itemdetail.do?ITEM_ID=' + itemid + '&userid=' + this.userid
      } else if (type === 1) {
        window.location.href = videoHttp.Http + 'kfhl/jjhl/itemdetail.do?ITEM_ID=' + itemid + '&userid=' + this.userid
      }
    },
    // 返回
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header_top{
    height: 12vw;
    display: flex;
    align-items: center;
  }
  .content{
    background: #FAF9FE;
    overflow: auto;
  }
  .sides, .sousuo{
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .sousuo{
    margin-left: 5px;
  }
  .fanhui{
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .fanhui img {
    width: 7px;
    height: 13px;
    margin:0 5px 0 13px;
  }
  /*搜索*/
  /deep/ .van-search--show-action{
    width: 79%;
    background: none;
  }
  /deep/ .van-search__action{
    margin-left: 5px !important;
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
/*  搜索结束*/
  .list{
    height: auto;
    background: #FFFFFF;
  }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
  }
  .title p{
    height: 16px;
    box-sizing: border-box;
    margin-left: 15px;
    border-left: 2px solid #1da4f2;
    padding-left: 5px;
    display: flex;
    align-items: center;
  }
  .list ul{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
  }
  .list ul li{
    height: 100%;
    display: flex;
    justify-content: center;
  }
  .list ul li p{
    display: flex;
    align-items: center;
  }
  .list ul .li_top img{
    width: 60px;
    height: 60px;
  }
  .list ul .li_top{
    width: 20%;
    align-items: center;
    justify-content: center;
  }
  .list ul .li_content{
    width: 55%;
    flex-direction: column;
    justify-content: center;
  }
  .list ul .li_content img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .list ul .li_content .name{
    font-size: 15px;
    margin-bottom: 3px;
  }
  .list ul .li_content .time{
    font-size: 13px;
    color: #999999;
  }
  .li_bottom{
    width: 25%;
    justify-content: center;
    align-items: center;
    color: #E3170D;
  }
</style>
